<template>
  <div id="index">
    <el-row class="num-div">
      <div class="total-title">已入库</div>
      <el-col :span="6">
        <div style="background-color: #804432" id="relixue" class="data-item">
          <div class="title">
            <img
              class="icon-img"
              src="../assets/images/index/rewhite.png"
            /><span>热力学数据</span>
          </div>
          <div class="num-item">
            <span class="number">3196</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="background-color: #4d3d4e" id="donglixue" class="data-item">
          <div class="title">
            <img
              class="icon-img"
              src="../assets/images/index/dongwhite.png"
            /><span>动力学数据</span>
          </div>
          <div class="num-item">
            <span class="number">30533</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="background-color: #485b55" id="shuyun" class="data-item">
          <div class="title">
            <img
              class="icon-img"
              src="../assets/images/index/yunwhite.png"
            /><span>输运数据</span>
          </div>
          <div class="num-item">
            <span class="number">1677</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div style="background-color: #393742" id="ranshao" class="data-item">
          <div style="margin-top: -10px" class="title">
            <img
              class="icon-img"
              src="../assets/images/index/ranwhite.png"
            /><span>燃烧实验数据</span>
          </div>
          <el-row class="sp-num-item">
            <el-col :span="12">
              <div>
                <div class="unit">点火延迟</div>
                <div class="number">43</div>
              </div>
              <div>
                <div class="unit">层 流</div>
                <div class="number">23</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <div class="unit">物种浓度</div>
                <div class="number">10</div>
              </div>
              <div>
                <div class="unit">高温热物性</div>
                <div class="number">35</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="num-div">
      <div class="total-title">待入库数据</div>
      <el-col :span="6">
        <div id="r-relixue" class="r-data-item data-item">
          <div class="title black-font">
            <img
              class="icon-img"
              src="../assets/images/index/rered.png"
            />热力学数据
          </div>
          <div class="num-item">
            <span class="number">144681</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div id="r-donglixue" class="r-data-item data-item">
          <div class="title black-font">
            <img
              class="icon-img"
              src="../assets/images/index/dongred.png"
            />动力学数据
          </div>
          <div class="num-item">
            <span class="number">41327</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div id="r-shuyun" class="r-data-item data-item">
          <div class="title black-font">
            <img
              class="icon-img"
              src="../assets/images/index/yunred.png"
            />输运数据
          </div>
          <div class="num-item">
            <span class="number">0</span>
            <span class="unit">条</span>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div id="r-ranshao" class="r-data-item data-item">
          <div style="margin-top: -10px" class="title black-font">
            <img
              class="icon-img"
              src="../assets/images/index/ranred.png"
            />燃烧实验数据
          </div>
          <el-row class="sp-num-item">
            <el-col :span="12">
              <div>
                <div class="unit">点火延迟</div>
                <div class="number">0</div>
              </div>
              <div>
                <div class="unit">层 流</div>
                <div class="number">0</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div>
                <div class="unit">物种浓度</div>
                <div class="number">0</div>
              </div>
              <div>
                <div class="unit">高温热物性</div>
                <div class="number">0</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 两个echar图表：具体样式可在引入文件进行微调 -->
    <el-row class="num-div">
      <el-col :span="13">
        <div class="dashboard">
          <div class="total-title">数据日志</div>
          <el-card
            style="border-radius: 10px; margin-left: 10px; margin-bottom: 20px"
          >
            <LineChart2 class-name="line_chart" width="100%" height="200px" />
          </el-card>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="dashboard">
          <div class="total-title">物种数据分析</div>
          <el-card
            style="border-radius: 10px; margin-right: 10px; margin-left: 10px"
          >
            <BarChart3 class-name="bar_chart" width="100%" height="200px" />
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart3 from "./dashboard/BarChart3";
import LineChart2 from "./dashboard/LineChart2";
export default {
  name: "Index",
  components: { LineChart2, BarChart3 },
  data() {
    return {
      // 版本号
      version: "3.6.0",
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.data-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  // 修改这个值，可以修改热力学数据、动力学数据等整个方块的高度
  height: 130px;
  margin-left: 10px;
  margin-right: 10px;
  font-weight: bold;
  color: #ffffff;
  opacity: 1;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px #888888;
}
.plitLine {
  color: #000;
}
.total-title {
  color: #bd4541;
  font-weight: bold;
  font-size: 20px;
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
}
.r-data-item {
  color: #666;
}
.data-item .title {
  display: flex;
  align-items: center;
  height: 33px;
  font-size: 150%;
  line-height: 28px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
  text-align: left;
  line-height: 33px;
}
.data-item .icon-img {
  margin-right: 10px;
  display: inline-block;
  height: 24px;
  width: 24px;
  line-height: 33px;
}
.data-item .number {
  font-size: 300%;
  letter-spacing: 2px;
  display: inline-block;
  margin-right: 5px;
}
.num-item {
  margin-left: 15px;
}
.num-div {
  padding-top: 15px;
  margin-right: 20px;
  margin-left: 10px;
}
.num-div:nth-child(2) {
  .unit {
    color: #666;
  }
}
.time {
  color: #454545;
  font-size: 12px;
  display: block;
}
.sp-num-item {
  margin-top: 10px;
  margin-bottom: -10px;
  .unit {
    font-size: 14px;
    display: inline-block;
    min-width: 70px;
    margin-left: 10px;
    color: #fff;
  }
  .number {
    font-size: 100%;
    margin-left: 5px;
    display: inline-block;
  }
}

.black-font {
  color: #666666 !important;
}

#index {
  // background-color: #F5F5F5;
}

#zongshuju {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#yiruku {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#r-ranshao {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .number {
    color: #393742;
  }
}
#r-donglixue {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .number {
    color: #4d3d4e;
  }
}
#r-relixue {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .number {
    color: #804432;
  }
}
#r-shuyun {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .number {
    color: #485b55;
  }
}
</style>
